<style type="text/css">
a {outline: 0 none;}
body {overflow-y: scroll;}
#wrap {
width: 800px;
margin: 20px auto;
}
#login_error {display: none;}
</style>
<script>
/* <![CDATA[ */
$(document).ready(function() {
 $("#top-login-button").click(function() {
  $.fancybox({
   href : "#UserIndexForm",
   afterClose : function(){ // it was onClosed for v1.3.4
    $("#login_error").hide();
    
   }
  }); // fancybox
 }); //click

 $("#UserIndexForm").bind("submit", function() {
  if ($("#UserUsername").val().length < 1 || $("#UserPassword").val().length < 1) {
   $("#login_error").show();
   $.fancybox.update(); // it was $.fancybox.resize(); for v1.3.4
   return false;
  }
  $.fancybox.showLoading(); // it was $.fancybox.showActivity(); for v1.3.4
  $.ajax({
   type   : "POST",
   cache  : false,
   url    : "<?php echo Router::Url(array('controller' => 'users','customer' => FALSE, 'action' =>'login'),TRUE) ?>",
   data   : $(this).serializeArray(),
   success: function(data) {
    $.fancybox(data);
    

   }
  });
  return false;
 }); // bind
}); // ready
/* ]]> */
</script>
<div id="wrap">

<a id="top-login-button" href="#UserIndexForm" rel="gallery">Open login form</a>
</div><!--wrap-->
<div style="">
    <?php echo $this->Form->create('User'); ?>
    <fieldset>
        <legend>
            <?php echo __('Please enter your username and password'); ?>
        </legend>
        <?php echo $this->Form->input('username');
        echo $this->Form->input('password');
    ?>
    </fieldset>
<?php echo $this->Form->end(__('Login')); ?>
</div>
